<!--
 * @Author: new-wang
 * @Date: 2025-04-17 15:12:43
 * @LastEditors: new-wang
 * @LastEditTime: 2025-04-21 09:57:14
 * @FilePath: \v3bbs\src\components\carousel\CarouselShow.vue
 * @Description:轮播图
-->
<template>
  <a-carousel arrows class="slideshow-content">
    <template #prevArrow>
      <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
        <LeftCircleOutlined />
      </div>
    </template>
    <template #nextArrow>
      <div class="custom-slick-arrow" style="right: 10px">
        <RightCircleOutlined />
      </div>
    </template>
    <div v-for="item in carouselData" :key="item.title">
      <img :src="item.image" style="width: 100%;" alt="" srcset="" />
    </div>
  </a-carousel>
</template>

<script setup lang="ts">
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const carouselData = ref([
  {
    title: ' 图1',
    content: ' carrots',
    image: new URL('@/assets/img/slider-20200706001316_2.png', import.meta.url).href
  },
  {
    title: ' 图2',
    content: ' carrots',
    image: new URL('@/assets/img/slider-20200706001316_2.png', import.meta.url).href
  },
  {
    title: ' 图3',
    content: ' carrots',
    image: new URL('@/assets/img/slider-20200706001316_2.png', import.meta.url).href
  },
  {
    title: ' 图4',
    content: ' carrots',
    image: new URL('@/assets/img/slider-20200706001316_2.png', import.meta.url).href
  },
])
</script>

<style scoped>
.ant-carousel:deep(.custom-slick-arrow) {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #fff;
  opacity: 0.5;
}

.ant-carousel:deep(.custom-slick-arrow):before {
  display: none;
}

.ant-carousel:deep(.custom-slick-arrow):hover {
  opacity: 0.8;
}
</style>
